<!DOCTYPE html>
<html>
<head lang="en">
    <title>首页</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/index.css" rel="stylesheet">
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travel.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script type="text/javascript" src="/js/plugins/form/jquery.form.js"></script>
    <!--渲染页面数据-->
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <!--移动端样式的使用-->
    <link rel="stylesheet" href="js/plugins/dialog2/dialog.css">
    <script src="js/plugins/dialog2/dialog.min.js"></script>

    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                $("#ipage").attr("src", "/login.html?" + new Date().getTime());
                $(".menu .user").html("<i class=\"fa fa-user fa-fw fa-2x\"></i>");
            }
            //渲染数据
            $(".menu").renderValues(user);
            // 加载侧边栏的时候带上毫秒值,解决缓存问题
            $("#ipage").attr("src", "/mine/simpleProfiles.html?" + new Date().getTime());

            // 获取每周推荐的数据
            $.get("/travels/commends", {type: 1, pageSize: 3}, function (data) {
                $("#travelsCommends").renderValues(data, {
                    getHref: function (item, value) {
                        $(item).attr("href", "/travelContent.html?id=" + value);
                    },
                    getHeadImgHref: function (item, value) {
                        var url = $(item).data('href');
                        $(item).attr("href", url + value);
                    }
                });
                //渲染完数据为第一给div设置active
                $(".carousel-item:first").addClass("active");
            })
            // 点击头像后侧边栏弹出
            $(".user").click(function () {
                $(".follow").removeClass("operationTop");
                // 加载侧边栏的时候带上毫秒值,解决缓存问题
                $("#ipage").attr("src", "/mine/simpleProfiles.html?" + new Date().getTime());
            })
            $(".followAdd").click(function () {
                $(".follow").addClass("operationTop");
            });
            //获取3条日报
            $.get('/dailies/list', {pageSize: 3}, function (data) {
                $("#dailyCommends1").renderValues(data.list[0], {
                    getHref: getHref
                });
                $("#dailyCommends2").renderValues(data.list[1], {
                    getHref: getHref
                });
                $("#dailyCommends3").renderValues(data.list[2], {
                    getHref: getHref
                });
            });
            //点击搜索
            $("#search").click(function () {
                var keyword = $("#searchKeyWord").val();
                if (keyword) {
                    window.sessionStorage.setItem("keyword", keyword);
                    window.location.href = "/search.html";
                } else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '请输入内容',
                        autoClose: 1000,
                        position: 'center'  // center: 居中; bottom: 底部
                    });
                }
            })
        })


    </script>
</head>

<body>
<div class="body">
    <div>
        <div class="follow search-head operationTop">
            <input type="checkbox" id="menu">
            <label for="menu" class="menu">
                <!--<span><i class="fa fa-user fa-fw fa-2x"></i></span>-->
                <span class="user">
			<i class="fa fa-fw fa-2x headimgUrl">
				<img style="position:relative;right: 20px;top:-5px; height: 40px;"
                     class="rounded-circle dynamic-head" render-src="headImgUrl">
			</i>
		</span>
                <span><i class="followAdd fa fa-chevron-left fa-fw fa-2x" style="color: #3E3C3B"></i></span>
            </label>

            <!-- 侧边栏 -->
            <div class="nav">
                <!--iframe 会把src的内容引入,展示在侧边栏中, 如果是要登陆后才能看到的内容就将它放在 mine 目录中
                frameborder :是边框,0 是没有边框  ,  width: 显示的内容占屏幕的宽度是多少-->
                <iframe id="ipage" frameborder="0" width="90%"></iframe>
            </div>

            <div class="search-head" style="background-color:  #034c50">
                <div class="row nav-search">
                    <div class="col-2"></div>
                    <div class="col-10">
                        <div class="input-group-sm search">
                            <input class="form-control" id="searchKeyWord" placeholder="搜索旅行攻略、日记和旅游资讯">
                        </div>
                        <i class="fa fa-search" id="search"
                           style="color:white;font-size:25px;position: absolute;top: 23%;left: 92%"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="height: 48px;background: white;">
    </div>
    <div class="container">
        <!--天气回显效果-->
        <div style="background-color: lightyellow" align="right">当前位置:
            <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=1" width="300" height="19"
                    frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
            <a href="/mine/weather/weather1.html">更多天气</a>
        </div>

        <h6 class="module-title">每周推荐</h6>
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <!---->
            <div id="travelsCommends">
                <!-- render-loop 循环div里的内容-->
                <div class="carousel-inner" render-loop="list">
                    <!-- active 是一个事件,即使有多个相同的div都要实现这个功能,但是只需要一个active即可-->
                    <div class="carousel-item">
                        <a render-fun="getHref" render-key="list.travel_id">
                            <img class="d-block w-100" render-src="list.coverUrl" width="100%" height="200px">
                            <span class="recommend" render-html="list.title">飞到羊城，只为一场最地道的早茶之旅</span></a>
                        <div class="recommend-author">
                            <a data-href="userProfiles.html?id=" render-fun="getHeadImgHref"
                               render-key="list.author_id">
                                <img class="rounded-circle" style="width: 10%;"
                                     render-src="list.author_headImgUrl">
                                <span render-html="list.author_nickName">山猫大叔</span>
                            </a>
                            在&nbsp;
                            <span render-html="list.place_name">广州</span>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
        </div>
        <hr>


        <div class="row nav-box">
            <div class="col" style="background-color: #DFE823;" align="center">
                <a href="strategyPage.html"><i class="fa fa-plane fa-fw"></i> 找攻略</a>
            </div>
            <div class="col" style="background-color: #7281D5;" align="center">
                <a href="travelPage.html"><i class="fa fa-book fa-fw"></i> 看游记</a>
            </div>
        </div>
        <div class="row nav-box">
            <div class="col" style="background-color: #f2741b;" align="center">
                <a href="scenic.html"><i class="fa fa-send fa-fw"></i> 景点门票</a>
            </div>
            <div class="col" style="background-color: #87CEFA;" align="center">
                <a href="question.html"><i class="fa fa-question-circle fa-fw"></i> 问达人</a>
            </div>
        </div>

        <div class="row dynamic " id="comments">
            <div class="col-1" style="padding: 0px;">
                <img class="rounded" src="/img/topComment.png" style="width: 50px;">
            </div>
            <div class="col">
                <div class="Marquee">
                    <div class="d-flex">
                        <a href="userProfiles.html?id=2">
                            <img class="rounded-circle dynamic-head"
                                 src="/upload/6610317b-2077-4bd3-98c7-7d31b6613469.jpg">
                        </a>
                        <a href="strategyComment.html" class="dynamic-detail" data-id="1">
                            <span>叩丁狼</span> 点评了攻略<p>广州攻略</p>
                        </a>
                    </div>
                    <div class="d-flex">
                        <a href="userProfiles.html?id=3">
                            <img class="rounded-circle dynamic-head"
                                 src="/upload/23a45130-e59c-4844-bc52-67aed3d57fc1.jpeg">
                        </a>
                        <a href="strategyComment.html" class="dynamic-detail">
                            <span>喵喵</span> 点评了攻略<p>广州攻略</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <hr>
    <div class="container">
        <h6 class="module-title">骡窝日报 <a href="/newsPage.html">更多</a></h6>

        <div id="dailyCommends1">
            <div class="news " id="bigger">
                <a data-href="newsContent.html?id=" render-key="id" render-fun="getHref">
                    <img width="100%" render-src="coverUrl">
                    <div class="caption">
                        <h5 render-html="title"></h5>
                        <p render-html="subtitle"></p>
                    </div>
                </a>
            </div>
        </div>

        <hr>
        <div id="smaller">
            <div id="dailyCommends2">
                <div style="margin-bottom: 20px">
                    <a data-href="newsContent.html?id=" render-key="id" render-fun="getHref">
                        <div class="row news-detail">
                            <div class="col-5">
                                <img render-src="coverUrl">
                            </div>
                            <div class="col-7">
                                <h4 render-html="title"></h4>
                                <p render-html="subtitle"></p>
                            </div>
                        </div>
                    </a>
                    <hr>
                </div>
            </div>
            <div id="dailyCommends3">
                <div style="margin-bottom: 20px">
                    <a data-href="newsContent.html?id=" render-key="id" render-fun="getHref">
                        <div class="row news-detail">
                            <div class="col-5">
                                <img render-src="coverUrl">
                            </div>
                            <div class="col-7">
                                <h4 render-html="title"></h4>
                                <p render-html="subtitle"></p>
                            </div>
                        </div>
                    </a>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    $(function () {
        showComments();
    })

    function showComments() {
        var Mar = document.getElementsByClassName("Marquee")[0];
        var child_div = Mar.getElementsByTagName("div");
        var picH = 50;//移动高度
        var scrollstep = 3;//移动步幅,越大越快
        var scrolltime = 20;//移动频度(毫秒)越大越慢
        var stoptime = 3000;//间断时间(毫秒)
        var tmpH = 0;
        Mar.innerHTML += Mar.innerHTML;

        function start() {
            if (tmpH < picH) {
                tmpH += scrollstep;
                if (tmpH > picH) tmpH = picH;
                Mar.scrollTop = tmpH;
                setTimeout(start, scrolltime);
            } else {
                tmpH = 0;
                Mar.appendChild(child_div[0]);
                Mar.scrollTop = 0;
                setTimeout(start, stoptime);
            }
        }

        setTimeout(start, stoptime)
    }
</script>
</body>

</html>